<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS3 动画</title>
    <style>
        /* 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。 */

        /* 指定至少这两个CSS3的动画属性绑定向一个选择器： */
        /* 规定动画的名称 */
        /* 规定动画的时长 */

        /* 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： */
        /* 注意: 您必须定义动画的名称和动画的持续时间。
        如果省略的持续时间，动画将无法运行，因为默认值是0。 */
        div {
            width: 100px;
            height: 100px;
            background: red;
            animation: myfirst 5s;
            /* Safari and Chrome */
            -webkit-animation: myfirst 5s;
        }

        @keyframes myfirst {
            from {
                background: red;
            }

            to {
                background: yellow;
            }
        }

        /* Safari and Chrome */
        @-webkit-keyframes myfirst {
            from {
                background: red;
            }

            to {
                background: yellow;
            }
        }
    </style>
</head>

<body>

    <p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

    <div></div>

</body>

</html>